<template>
    <div class="header" :style="{backgroundImage:`url(${header.avatar})`}">
        
        <div class="mao"></div>
        <div class="right">
            <div class="logo">
                <img :src="header.avatar" alt="">
            </div>
            <div class="info">
                
                <div class="top">
                    <span class="pin">品牌</span>
                    {{header.name}}
                </div>
                <div class="fenNia">
                    {{header.description}}/{{header.deliveryTime}}分钟送达
                </div>

                <div class="bottom">
                    
                    <span class="jian">减</span>
                    在线支付满28减5,满50减10
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="xian">
                {{header.bulletin}} 
            </div>
            <div class="jiaTou">></div>
        </div>
    </div>
</template>

<script>
    import { mapActions, mapState } from "vuex";

    export default {
        data() {
            return {      
            }
        },
    created() {
        this.getHeader();
    },
    computed: {
        ...mapState(["header"]),
    },
    methods: {
        ...mapActions(["getHeader"]),
    },  
    }
</script>

<style lang="less">
    .header{
        position: fixed;
        top: 0;
        left: 0;
        // width: 100vw;
        height: 129px;
        background: no-repeat;
        background-size: cover;
        position: relative;
  
        .mao{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            // 毛玻璃
            background-color: rgba(7, 17, 27, 0.5);
            backdrop-filter: blur(10px);
        }
        .right{
            display: flex;
            position: absolute;
            width: 100vw;
            .logo{
                width: 64px;
                height: 64px;
                margin: 24px 16px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .info{
                color: #fff;
                margin-top: 24px;
                .fenNia{
                    font-size: 12px;
                    margin-top: 8px;
                    color: rgb(255, 255, 255);
                }
                .top{
                    font-weight: 600;
                    font-size: 16px;
                }
                .pin{
                    display: inline-block;
                    width: 50px;
                    background-color: red;
                    text-align: center;
                    line-height: 23px;
                }
                .bottom{
                    margin-top: 4px;
                    font-size: 12px;
                    color: rgb(255,255,255);
                    span{
                        padding: 0 2px;
                        background-color: #FBFFFC;
                        color: #F17275;
                        border-radius: 2px;
                        line-height: 2px;
                    }
                }
            }
        }
        .footer{
            position: absolute;
            bottom: 0;
            width: 100vw;
            height: 28px;
            background-color: rgba(7, 17, 27,0.2);
            overflow: hidden;
            .xian{
                width: 90%;
                margin-left: 12px;
                font-size: 12px;
                line-height: 28px;
                color: rgb(255,255,255);
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap

            }
            .xian::before{
                content: "公告";
                background-color: #fff;
                color: black;
                margin-right: 4px;
                padding: 0 2px;
                font-weight: 600;
            }
            .jiaTou{
                // background-color: black;
                margin-top: 5px;
                color: #fff;
                position: absolute;
                top: 0px;
                right: 12px;
                font-size: 12px;
            }
        }
    }

</style>